<template>
    <div class="container bgd">
        <div class="outer base-shadow">
            <div class="logo text-center">
                信息与机电工程学院问卷系统
            </div>
            <el-input v-model="adminName" placeholder="请输入账号"></el-input>
            <el-input v-model="adminPwd" placeholder="请输入密码" show-password @keyup.enter.native="login"></el-input>
            <div class="remember">
                <el-checkbox v-model="checked">记住我</el-checkbox>
            </div>
            <div>
                <el-button type="primary" round @click="login">登录</el-button>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'Login',
        data() {
            return {
                adminName: '',
                adminPwd: '',
                checked: false
            }
        },
        methods: {
            login() {
                axios({
                    method: 'POST',
                    url: '/doLogin',
                    withCredentials: true,
                    data: JSON.stringify({
                        'adminName': this.adminName,
                        'adminPwd': window.btoa(this.adminPwd),
                        'remember-me': this.checked.toString()
                    }),
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then((result) => {
                    if (result.data.code = '200') {
                        let key = window.btoa('isLogin')
                        sessionStorage.setItem(key, 1)
                        this.$store.commit('authority',result.data.data)
                        this.$router.replace({ path: '/main' })
                    } else {
                        alert(result.data.msg)
                    }
                }).catch((err) => {
                    alert(err)
                });
            }
        },
        mounted() {
            let key = window.btoa('isLogin')
            sessionStorage.setItem(key, '1')
            console.log(key);
        },
    }
</script>
<style scoped>
    .bgd {
        overflow: hidden;
        background-color: #e1ecf5;
    }

    .logo {
        height: 40px;
        line-height: 40px;
    }

    .outer {
        height: 220px;
        width: 400px;
        background-color: #ffffff;
        border-radius: 5px;
        margin: 30vh auto;
        padding: 10px;
    }

    .el-input {
        margin-bottom: 10px;
    }

    .el-button {
        margin: 10px auto;
        display: block;
    }

    .remember {
        margin: 0 auto;
        width: 70px;
    }

    .container {
        height: 100vh;
    }
</style>